* {
    margin: 0;
    padding: 0;
}
body {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
   /* background-color: #d9afd9;*/
background-image: linear-gradient(0deg, #e3aa1a54 0%, #3e945649
100%);
}

.card {
    width: 600px;
    height: 300px;
    background-color: #f5efe6;
    color: #334756;
    box-shadow: 0px 0px 22px 5px rgb(237, 237, 237);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 2.5em;
    font-family: '楷体';
    position: relative;
    /* 使盒子具备透视效果 */
    transform-style: preserve-3d;
    transform: perspective(900px) rotateX(23deg);
}
.card::before,
.card::after {
    content: '';
    width: 50%;
    height: 100%;
    color: #b7c4cf;
    font-size: 40px;
    position: absolute;
    font-family: '华文行楷';

}
.card::before {
    content: '给公主的';
    left: 0;
    top: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: 2s;
    transform-origin: left;
}
.card::after {
    content: '一封信~';
    right: 0;
    top: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transform-origin: right;
    transition: 2s;

}

.card:hover::before {
    transform: rotateY(-90deg);
}
.card:hover::after {
    transform: rotateY(90deg);
}
.content {
    opacity: 0;
    transition: 2s;
}
.card:hover .content {
    opacity: 1;
}
/* 心动效果 */
/* 因为写动画太琐碎了 所以偷个懒 这里就不再写了 */
@keyframes change {
    30% {
      transform: rotate(0deg) scale(1.1) translateX(0%);
    }/*
    40% {
      transform: rotate(0deg) scale(1.3) translateX(0%);
    }
    45% {
      transform: rotate(0deg) scale(0.9) translateX(0%);
    }
    50% {
      transform: rotate(0deg) scale(0.5) translateX(0%);
    }
    70% {
      transform: rotate(0deg) scale(1) translateX(0%);
    }
    80% {
      transform: rotate(0deg) scale(1.5) translateX(0%);
    }
    90% {
      transform: rotate(0deg) scale(0.7) translateX(0%);
    }
    95% {
      transform: rotate(0deg) scale(1.5) translateX(0%);
    }
    100% {
      transform: rotate(0deg) scale(1.1) translateX(0%);
    }*/
  } 
  /* cv工程师 嘿嘿嘿 */
  .ChristmasTree {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 20px;
	scale:0.2;
	
    /* pink yyds */
    /*background-color: pink;*/
    /* 往右下脚偏一些 */
    /*transform: rotate(0deg) translateX(0%);*/
    /* 给这个爱心绑定动画 */
    /* 动画的名字 */
    animation-name: change;
    /* 动画持续时间 */
    animation-duration: 2.2s;
    /* 无限次播放动画 永远对你心动 */
    animation-iteration-count: infinite;
    cursor: pointer;


  }
/* 画爱心桃 */
.ChristmasTree::before {
    content: url('tree.png');
    width: 100px;
    height: 100px;
    border-radius: 50%;
   /* background-color: pink;*/
    position: absolute;
    transform: translateX(-0px);
   transform: translateY(-0px);
	
}
/*
.ChristmasTree::after {
    content: url('tree.png');
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    transform: translateY(-300px);
}
*/
/* 中间的字体样式有点丑  调一下 */
.text {
    color: #7D6E83;
    margin-top: 45px;
    font-family: '华文行楷';
}
.textTwo {
    color: #7D6E83;
    font-weight: bold;
    font-size: 25px;
    margin-top: 30px;
}
/* 神秘的box */
#box {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -200;
    opacity: 0;
    color:  #ffffff;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 13vh;
	margin-top:-10px;
    width: 90vw;
    height: 87vh;
	line-height: 105%;
	text-align: left;
    background-image: url(bac1.jpg);
    overflow: hidden;
    background-size: cover;
    font-size: 20px;
	font-weight: lighter;
    /*font-family: Bradley Hand ITC,'华文行楷';*/
	font-family: '华文行楷';
    transition: opacity 7s;
}



.snow,
.snow::before,
.snow::after {
  /* 所有雪的元素，就从一个 div 延伸开 */
  content: "";

  /* 使用径向渐变做出雪花的样子 */
  /* 不同大小，不同位置，尽量错开位置 */
  background:	radial-gradient(3px 3px at 100px 50px,  #ffffff91,  transparent),
    			radial-gradient(4px 4px at 200px 150px, #ffffff91,	 transparent),
    			radial-gradient(5px 5px at 300px 80px,  #ffffff91,	 transparent),
    			radial-gradient(6px 6px at 400px 130px, #ffffff91,	 transparent),
    			radial-gradient(3px 3px at 540px 480px, #ffffff91,	 transparent),
    			radial-gradient(4px 4px at 50px 230px,  #ffffff91,	 transparent),
    			radial-gradient(5px 5px at 120px 680px, #ffffff91,	 transparent),
    			radial-gradient(6px 6px at 223px 430px, #ffffff91,	 transparent),
    			radial-gradient(3px 3px at 700px 300px, #ffffff91,	 transparent),
    			radial-gradient(4px 4px at 760px 550px, #ffffff91,	 transparent),
    			radial-gradient(5px 5px at 550px 280px, #ffffff91,	 transparent),
    			radial-gradient(6px 6px at 650px 630px, #ffffff91,	 transparent);
  /* 限制雪花显示的范围，剩下的部分会自动复制填满 */
  background-size: 800px 800px;

  /* 让雪花定位显示在中间 */
  position: absolute;
  /* inset 在这相当于 top、right、bottom、left */
  inset: -800px 0 0 0;

  /* 雪花下落的动画 */
  animation: animate 5s linear infinite;
}
.snow::before {
  /* 错开显示多层雪花 */
  margin: -390px;
  /* 降低一点透明度，分层更明显 */
  opacity: 0.6;

  /* 下落动画的时间不一样，也是尽量错开 */
  animation-duration: 6s;
  animation-delay: -1.5s;
}
.snow::after {
  /* 同上 */
  margin: -130px;
  opacity: 0.8;

  animation-duration: 10s;
}

@keyframes animate {
  0% {
    transform: translateY(0);
  }
  100% {
    /* 动画就是简单的往下移动 */
    transform: translateY(800px);
  }
}